'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import ResponsiveVideoPlayer from './responsive-video-player';
import VideoSkeleton from './video-skeleton';
import { getEpisodeHistory, saveEpisodeHistory } from '@/lib/utils/episode-history';

interface PlayInfo {
  url: string;
  name: string;
}

interface VideoContainerProps {
  playList: PlayInfo[];
  initialIndex: number;
  videoId: number;
}

export default function VideoContainer({ playList, initialIndex, videoId }: VideoContainerProps) {
  const [isPlayerReady, setIsPlayerReady] = useState(false);
  const [showSkeleton, setShowSkeleton] = useState(true);
  const [actualIndex, setActualIndex] = useState(initialIndex);
  const isFirstRender = useRef(true);
  const previousIndexRef = useRef(initialIndex);
  const playerInstanceRef = useRef<boolean>(false);
  const playerReadyRef = useRef(false);
  
  // 在组件加载时决定使用哪个选集索引
  useEffect(() => {
    if (isFirstRender.current) {
      // 1. 如果URL已经指定了选集索引，优先使用URL中的
      if (initialIndex > 0) {
        setActualIndex(initialIndex);
        // 同时更新localStorage记录
        saveEpisodeHistory(videoId, initialIndex);
      } 
      // 2. 否则尝试从localStorage获取历史记录
      else {
        const storedIndex = getEpisodeHistory(videoId);
        if (storedIndex >= 0 && storedIndex < playList.length) {
          console.log('从localStorage读取选集记录:', storedIndex);
          setActualIndex(storedIndex);
        } 
        // 3. 都没有则播放第一集
        else {
          console.log('没有找到历史记录，播放第一集');
          setActualIndex(0);
        }
      }
    }
  }, [initialIndex, videoId, playList.length]);
  
  // 检测是否是切换集数而不是首次加载
  useEffect(() => {
    // 如果不是首次渲染，且initialIndex变化了，说明是切换集数
    if (!isFirstRender.current && previousIndexRef.current !== initialIndex) {
      // 集数切换时不显示骨架屏
      setShowSkeleton(false);
      console.log('集数切换，保持视频播放器显示');
      setActualIndex(initialIndex);
      
      // 更新localStorage记录
      saveEpisodeHistory(videoId, initialIndex);
    }
    
    // 更新前一个索引的引用
    previousIndexRef.current = initialIndex;
    
    // 标记已经不是首次渲染
    if (isFirstRender.current) {
      isFirstRender.current = false;
    }
  }, [initialIndex, videoId]);
  
  // 手动触发播放视频
  const startPlayback = useCallback(() => {
    // 触发自定义事件，通知播放器开始播放
    if (typeof window !== 'undefined' && playerReadyRef.current) {
      console.log('屏幕宽度确定，手动触发播放');
      const playEvent = new CustomEvent('startPlayback', {
        detail: { videoId }
      });
      window.dispatchEvent(playEvent);
    }
  }, [videoId]);
  
  // 初始化时检查窗口宽度是否可用
  useEffect(() => {
    // 检查window和window.innerWidth是否可用
    if (typeof window !== 'undefined' && window.innerWidth) {
      // 窗口宽度可用，可以准备显示实际视频
      const timer = setTimeout(() => {
        if (isPlayerReady) {
          setShowSkeleton(false);
          // 骨架屏消失后，延迟短暂时间再开始播放，确保UI已更新
          setTimeout(() => {
            startPlayback();
          }, 100);
        }
      }, 300); // 使用较短的延迟，因为我们已经确认浏览器环境已加载
      
      return () => clearTimeout(timer);
    }
  }, [isPlayerReady, startPlayback]);
  
  // 处理播放器准备好的回调
  const handlePlayerReady = (isReady: boolean) => {
    if (isReady) {
      setIsPlayerReady(true);
      playerInstanceRef.current = true;
      playerReadyRef.current = true;
      
      // 检查window和window.innerWidth是否可用
      if (typeof window !== 'undefined' && window.innerWidth) {
        // 如果不是首次加载，立即隐藏骨架屏
        if (!isFirstRender.current) {
          setShowSkeleton(false);
          // 立即开始播放
          startPlayback();
        }
        // 如果是首次加载但窗口宽度已经可用，使用短延迟
        else {
          setTimeout(() => {
            setShowSkeleton(false);
            // 骨架屏消失后开始播放
            setTimeout(() => {
              startPlayback();
            }, 100);
          }, 500); // 稍微增加延迟，确保视频播放器完全加载
        }
      } else {
        // 窗口宽度不可用，保持骨架屏直到下一个useEffect检测到窗口宽度
        console.log('窗口宽度不可用，保持显示骨架屏');
      }
    }
  };
  
  // 当选集改变时自动保存到localStorage
  const handleEpisodeChange = (index: number) => {
    saveEpisodeHistory(videoId, index);
  };
  
  // 组件卸载时清理资源
  useEffect(() => {
    return () => {
      // 触发自定义事件，通知播放器组件卸载
      if (playerInstanceRef.current && typeof window !== 'undefined') {
        console.log('VideoContainer 组件卸载，通知清理播放器资源');
        const cleanupEvent = new CustomEvent('cleanupPlayer', {
          detail: { videoId, reason: 'containerUnmount' }
        });
        window.dispatchEvent(cleanupEvent);
        
        // 重置播放器实例状态
        playerInstanceRef.current = false;
        playerReadyRef.current = false;
      }
    };
  }, [videoId]);
  
  return (
    <div className="mb-8 relative">
      {/* 骨架屏 */}
      <div 
        className={`transition-all duration-500 absolute inset-0 z-10 ${
          showSkeleton ? 'opacity-100 visible' : 'opacity-0 invisible'
        }`}
      >
        <VideoSkeleton />
      </div>
      
      {/* 视频播放器，始终渲染但根据状态控制显示 */}
      <div 
        className={`transition-all duration-500 ${
          showSkeleton ? 'opacity-0' : 'opacity-100'
        }`}
      >
        <ResponsiveVideoPlayer
          playList={playList}
          initialIndex={actualIndex}
          videoId={videoId}
          onReady={handlePlayerReady}
          onEpisodeChange={handleEpisodeChange}
        />
      </div>
    </div>
  );
} 